<template>
	<view>
		<!-- <view class="big">
			<form @submit="formSubmit" @reset="formReset" class="formdata">
				<view class="uni-form-item uni-column">
					<input class="uni-input" name="name" placeholder="请输入用户名" />
				</view>
				<view class="uni-form-item uni-column">
					<input class="uni-input" name="password" type="password" placeholder="请输入密码" />
				</view>
				<view class="uni-btn-v">
					<button form-type="submit">登录</button>
					<button type="default" form-type="reset">重置</button>
				</view>
				<view class="register" @click="register">立即注册</view>
			</form>
		</view> -->
		<view class="big">
			<view class="">
				<image src="../../static/游戏.png"></image>
			</view>
			<view class="form">
				<u-form :model="form" ref="uForm">
					<u-form-item prop="name">
						<u-input placeholder="请输入用户名" v-model="form.name" />
					</u-form-item>
					<u-form-item prop="password">
						<u-input placeholder="请输入密码" type="password" v-model="form.password" />
					</u-form-item>
				</u-form>
				<view>
					<u-button @click="submit">登录</u-button>
					<u-button @click="reset">重置</u-button>
				</view>

				<view class="register" @click="register">立即注册</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					password: '',
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: 'blur',
					}],
					password: [{
						min: 3,
						message: '密码格式不正确',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			//轻提示
			// showToast() {
			// 	this.$refs.uToast.show({
			// 		title: '登录成功',
			// 		type: 'success',
			// 		url: '/pages/user/index'
			// 	})
			// },
			// async getuser(){
			// 	const res = await this.$api.get({
			// 		id:2
			// 	})
			// 	console.log(res)
			// },
			// 根据登录账号查询
			async getUserDetail(userName) {
				const res = await this.$api.getUserDetail({
					userName
				})
				if (res.code == 200) {
					localStorage.setItem('user', JSON.stringify(res.data.records[0]))
				}
				console.log(res.data.records[0])
			},
			//登录
			async getLogin(username, password) {
				// uni.request({
				// 	url: '/api/login/login',
				// 	method: 'POST',
				// 	data: {
				// 		"username":username,
				// 		"password":password
				// 	},
				// 	header: {
				// 		'Content-Type': 'application/x-www-form-urlencoded'
				// 	},
				// 	success: (res) => {
				// 		console.log('登录---', res)
				// 	},
				// 	fail: (err) => {
				// 		uni.showToast({
				// 			title: '请求接口失败'
				// 		})
				// 		console.log(err)
				// 	}
				// })
				// console.log(params)
				const res = await this.$api.getLogin({username,password})
				console.log(res)
				if (res.code == 200) {
					localStorage.setItem('token', res.data.token)
					this.getUserDetail(username)
					this.$tool.success()
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/news/index'
						})
					}, 500)
				} else {
					alert(res.msg.replace('login.password:','').replace('login.username:',''))
				}
			},
			submit() {
				let {
					name,
					password
				} = this.form
				console.log(name,password)
				this.getLogin(name, password)

			},
			reset() {
				this.form.name = ''
				this.form.password = ''
			},
			register() {
				uni.navigateTo({
					url: '../register/register'
				})
			}
			// formSubmit: function(e) {
			// 	console.log(JSON.stringify(e.detail.value))
			// 	console.log(e.detail.value)
			// 	const name = e.detail.value.name.trim();
			// 	const pass = e.detail.value.password.trim();
			// 	console.log(name,pass)
			// 	if(name=='123'&&pass=='234'){
			// 		uni.navigateTo({
			// 			url:'../news/index'
			// 		})
			// 	}else{
			// 		console.log(2)
			// 	}
			// },
			// formReset(){
			// 	console.log('重置')
			// }
		},
		onLoad() {

		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style scoped>
	.big {
		width: 100vw;
		height: 93.2vh;
		background-color: rgb(243, 241, 241);
		overflow: hidden;
		position: relative;
		/* text-align: center; */
	}

	.form {
		position: absolute;
		/* top: 50%; */
		display: inline-block;
		width: 100%;
		/* transform: translate(-50%, -50%); */
	}

	.u-input {
		background-color: white;
		border-radius: 44rpx;
		margin: 0 20rpx;
		height: 60rpx;
		padding: 0px 30rpx;

	}

	.u-button {
		background: rgb(118, 237, 214);
		color: white;
		border-radius: 22px;
		margin: 15px 18px;
		width: 40%;
		float: left;

	}

	.register {
		float: right;
		margin-right: 25px;
		color: rgb(118, 237, 214);
	}

	image {
		width: 150rpx;
		height: 150rpx;

		/* margin-top: 185rpx; */
		margin: 150rpx 0 20rpx 300rpx;
	}
</style>
